<template>
  <div>
    <input type="text" :value="firstName" @input="handleInput1"/>
    <input type="text" :value="lastName" @input="handleInput2"/>
  </div>
</template>
<script setup>
const props = defineProps({
  firstName: {
    type: String,
    default: '',
  },
  lastName:{
    type: String,
    default: ''
  },
  firstNameModifiers:{
    default: () => ({})
  },
  lastNameModifiers:{
    default: () => ({})
  }
})
const emit = defineEmits(['update:firstName','update:lastName'])
const handleInput1= (e) => {
  let value = e.target.value
  if(props.firstNameModifiers.capitalize){
    value = value.charAt(0).toUpperCase()+value.slice(1)
  }
  emit('update:firstName',value)
}
const handleInput2= (e) => {
  let value = e.target.value
  if(props.lastNameModifiers.toUpperCase){
    value = value.toUpperCase()
  }
  emit('update:lastName',value)
}
</script>

<style scoped>

</style>
